<template>
  <div>
    <el-card>
      <template #header> 订单管理 </template>
      <el-form inline style="width: 1200px" :model="formData">
        <el-form-item label="订单号">
          <el-input v-model="formData.orderNo"></el-input>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="formData.consignee"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formData.phone"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-input v-model="formData.orderState"></el-input>
        </el-form-item>
        <el-form-item label="选择时间">
          <el-date-picker
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            v-model="formData.date"
            value-format="yyyy-MM-dd hh:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border :style="{ width: w + 'px' }">
        <el-table-column label="订单号" prop="orderNo"> </el-table-column>
        <el-table-column label="下单时间" prop="orderTime"> </el-table-column>
        <el-table-column label="手机号" prop="phone"> </el-table-column>
        <el-table-column label="收货人" prop="consignee"> </el-table-column>
        <el-table-column label="配送地址" prop="deliverAddress">
        </el-table-column>
        <el-table-column label="送达时间">
          <template #default="{ row }">
            <span>{{ row.deliveryTime | YMDHms }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户备注" prop="remarks"> </el-table-column>
        <el-table-column label="订单金额" prop="orderAmount"> </el-table-column>
        <el-table-column label="订单状态" prop="orderState"> </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text">查看</el-button>
            <el-button type="text">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        class="el-pagination mt20"
        :page-sizes="[3, 5]"
        :page-size="pageSize"
        :current-page="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="sizeChange"
        background
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { api_order_list } from "@/api/order";
import risizew from "@/assets/mixins/risizeW.js";
export default {
  mixins: [risizew],
  data() {
    return {
      formData: {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: [],
      },
      tableData: [],
      currentPage: 1,
      pageSize: 3,
      total: 1,
      newForm: {},
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getOrderList();
    },
    sizeChange(val) {
      this.pageSize = val;
      this.getOrderList();
    },
    // 初始化发请求获取订单列表
    async getOrderList() {
      let res = await api_order_list({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        ...this.newForm,
        date: JSON.stringify(this.newForm.date || ""), //如果为null就转换成空字符串
      });
      let { total, data } = res.data;
      this.total = total;
      this.tableData = data;
    },
    // 点击搜索发请求
    search() {
      this.newForm = { ...this.formData };
      this.getOrderList();
    },
  },
  created() {
    this.getOrderList();
  },
};
</script>

<style lang="scss" scoped>
</style>